<div class="search-icon">
  <mat-icon color="primary">search</mat-icon>
</div>
<input
  #input
  (input)="emitFilter($event.target.value)"
  (keydown.enter)="emitNextMatched()"
  (keydown.shift.enter)="emitPrevMatched()"
  class="filter-input"
  placeholder="Search components"
/>
@if (matchesCount()) {
  <div class="matches-count">
    @if (currentMatch(); as currentMatch) {
      {{ currentMatch }} of {{ matchesCount() }}
    } @else {
      {{ matchesCount() === 1 ? "1 match" : `${matchesCount()} matches` }}
    }
  </div>
  <div class="prev-next-buttons">
    <button
      (click)="emitPrevMatched()"
      class="prev-btn"
      matTooltip="Previous match"
      aria-label="Previous match"
    >
      <mat-icon> expand_less </mat-icon>
    </button>
    <button
      (click)="emitNextMatched()"
      class="next-btn"
      matTooltip="Next match"
      aria-label="Next match"
    >
      <mat-icon> expand_more </mat-icon>
    </button>
  </div>
  <button
    class="clear-btn"
    (click)="clearFilter()"
    matTooltip="Clear filter"
    aria-label="Clear filter"
  >
    <mat-icon> close </mat-icon>
  </button>
}
